<template>
	<div class="wy-main matching-tendering">
		<a-row class="wy-main-title">
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical" type="vertical" />
					<span class="title-span">招标公告</span>
					<a-divider class="title-divider" />
				</p>
			</a-col>
		</a-row>
		<div>
			出发地：
			<a-input readOnly style="width:20%;" @click="departureShowMap" v-decorator="[ 'placeofDeparture']"
			 placeholder='请选择出发地' ref="userNameInput">
				<a-icon type="environment" slot="suffix" style="color: #15837A;" />
			</a-input>
			到达地：
			<a-input readOnly style="width:20%;" @click="destinationShowMap" class="wy-input" v-decorator="[ 'placeofArrival']"
			 placeholder='请选择到达地'>
				<a-icon type="environment" slot="suffix" style="color: #FF2F47;" />
			</a-input>
			公司类型：
			<a-select  style="width:20%"  v-decorator="[ 'transportationType']">
				<a-select-option value="1">
					第三方物流
				</a-select-option>
				<a-select-option value="2">
					运输车辆
				</a-select-option>
				<a-select-option value="3">
					快递公司
				</a-select-option>
				<a-select-option value="4">
					搬家公司
				</a-select-option>
				<a-select-option value="5">
					国际海运
				</a-select-option>
				<a-select-option value="6">
					国际空运
				</a-select-option>
			</a-select>
			<a-button>搜索</a-button>
		</div>
		<a-table :columns="columns" :dataSource="data" style="margin-top: 10px;">
			<span slot="name" slot-scope="text1">
				<a>{{text1}}</a>
			</span>
			<span slot="Contacts" slot-scope="text, record">
				 <a-tag color="#f50" >我要投标</a-tag>
			</span>
			<span slot="operation" slot-scope="text, record">
				<a href="javascript:;">	<a-icon type="file-search" /> </a>
			</span>
		</a-table>
		<!--地图Svg显示位置-->
		<map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
	</div>
</template>
<script>
	import MapSvg from '@/components/dialog/MapSvg'

	const columns = [{
		title: '招标公告',
		dataIndex: 'name',
		key: '1',
		scopedSlots: {
			customRender: 'name'
		},
	}, {
		title: '发布/刷新时间',
		dataIndex: 'address',
		key: '2',
	}, {
		title: '投标',
		key: '3',
		scopedSlots: {	
			customRender: 'Contacts'
		},
	}, {
		title: '查看',
		key: '6',
		scopedSlots: {	
			customRender: 'operation'
		},
	}];

	const data = [{
		key: '1',
		name: '喜多多集团泉州公司招标事项',
		address: '2018-05-01',
	}, {
		key: '2',
		name:'山东东宏管业股份有限公司2018年物流运输招标公告',
		address: '2018-06-01',
	}, {
		key: '3',
		name: '上海百事可乐饮料有限公司2018年新区仓库配送招标公告',
		address: '2018-04-28',
	}, {
		key: '4',
		name: '山东东宏管业二季度物流招标公告',
		address: '2018-04-18',
	}, {
		key: '5',
		name: '山东泉林本色有限公司生活用纸运输招标公告',
		address: '2018-04-21',
	}];
	export default {
		data() {
			return {
				data,
				columns,
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		components: {
			MapSvg
		},
		methods: {
			// 省市地图回调
			mapSvgCall(d) {
				if (d.name === 'departure') {
					this.form.setFieldsValue({
						placeofDeparture: d.provCityArea
					});
					this.departureData = Object.assign({}, d);
					console.log(this.departureData, 898888)
				}
				if (d.name === 'destination') {
					this.form.setFieldsValue({
						placeofArrival: d.provCityArea
					});
					this.destinationData = Object.assign({}, d);
				}
				if (d.name === 'departureStreet') {
					this.form.setFieldsValue({
						departureStreet: d.address
					});
				}
				if (d.name === 'destinationStreet') {
					this.form.setFieldsValue({
						destinationStreet: d.address
					});
				}
				//				this[d.name] = d.address;
				this.getDistanceCount();
			},
			// 选择出发地
			departureShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('departure', 2, '', '', '');
			},
			// 选择到达地
			destinationShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('destination', 2, '', '', '');
			},
			// 起运地到目的地的距离
			getDistanceCount() {
				if (this.departureData.point && this.destinationData.point) {
					this.$refs.mapSvgDialog.distanceCount(this.departureData.point, this.destinationData.point);
				}
			},
			// 调用距离返回
			distanceCall(num) {
				console.log(num)
				this.distance = num
				//				 this.form.setFieldsValue({ juliNum: num });
			},
		}
	}
</script>

<style lang="less" scoped>
	.matching-tendering {
		.buttom-top {
			padding: 10px 30px;
			background: #E4F0F6;

			h6 {
				color: #E0330B;
			}

			ul {
				list-style: none;
				padding-left: 0px;
			}
		}
	}
</style>
